<template>
  <div class='preview-contaienr both-100'>
    <office-docx
      class="height-100" 
      v-if="['doc','docx'].includes(fileType)" 
      :fileUrl="fileName">
    </office-docx>
    <office-excel
      class="height-100" 
      v-else-if="['xls','xlsx'].includes(fileType)" 
      :fileUrl="fileName">
    </office-excel>
    <video-preview
      class="height-100" 
      v-else-if="['mp4'].includes(fileType)" 
      :fileUrl="fileName">
    </video-preview>
    <iframe
      class="both-100"
      v-else-if="['txt','pdf'].includes(fileType)"
      :src="fileName">
    </iframe>
    <img v-else :src="fileName" alt="">
  </div>
</template>

<script>
import OfficeDocx from '@/components/office/OfficeDocx'
import OfficeExcel from '@/components/office/OfficeExcel'
import VideoPreview from '@/components/VideoPreview'

export default {
  props: {
    fileName: {
      type: String,
      require: true,
    }
  },
  data() {
    return {
      officeComp: 'OfficeDocx',
      fileType: ''
    };
  },
  computed: {

  },
  watch: {
    // 判断文件类型
    fileName: {
      handler(val) {
        console.log(val)
        if(val) {
          const fileExt = val.slice((val.lastIndexOf(".") - 1 >>> 0) + 2)
          this.fileType = fileExt
        }
      },
      immediate: true
    }
  },
  methods: {
    // 判断是否是 office类型的
    
  },
  created() {
  },
  mounted() {

  },
  components: {
    OfficeDocx,
    OfficeExcel,
    VideoPreview
  },
}
</script>

<style lang='less' scoped>

</style>